<template>
  <div class="banner-download">
    <div class="banner-item">
      <img src="https://p1.meituan.net/travelcube/7264ce9c25de2e464e3acd996fe8ad362803.png" class="img-box">
      <div class="logo-theme">
        <p class="logo-tit">省钱利器 超划算</p>
        <p class="logo-desc">吃喝玩乐尽在美团</p>
      </div>
    </div>
    <div class="to-app-btn">
      <span class="call-app-btn" id="openApp" data-url="imeituan://www.meituan.com/home/">去APP</span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Adv"
    }
</script>

<style lang="stylus" scoped>
  .banner-download
    height .52rem
    background #000000
    position relative
    overflow hidden

  .banner-item
    display flex
    padding 0.08rem 0 0.08rem 0.15rem
    width 1.62rem

  .banner-item .img-box
    display block
    width 0.37rem
    height 0.37rem

  .banner-item .logo-theme
    padding-left 0.1rem
    color #fff

  .logo-tit
    font-size 0.13rem
    padding-top 0.03rem

  .logo-desc
    font-size 0.11rem
    font-weight 150
    padding-top 0.03rem

  .banner-download:after
    content: ""
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    height: 1px
    background: #c6c0b3
    transform: scaleY(.5)
    -webkit-transform: scaleY(.5)

  .to-app-btn
    position absolute
    right 0.15rem
    top 0.11rem
    width 0.6rem
    height 0.3rem
    background-image linear-gradient(135deg, #FFD000 0%, #FFBD00 100%)
    border-radius 0.07rem
    line-height 0.23rem
    text-align center

  .call-app-btn
    color #000000
    font-size 0.08rem

  .download-btn
    position absolute
    right 17%
    bottom 10%
    width  31%
    height 34%
    z-index 1

</style>
